<template>
  <div>
    <div class="line">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#1E1E1E"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <img class="zititubiao" title="刷新界面" @click="mlyz()" src="@/assets/loge字体.png" />
        <el-menu-item index="1" @click="qiehuandaohang(1)">首页</el-menu-item>
        <el-menu-item index="2" @click="qiehuandaohang(2)">资源</el-menu-item>
        <el-menu-item index="3" @click="qiehuandaohang(3)">问答</el-menu-item>
        <el-menu-item index="4">vip会员</el-menu-item>
        <el-dropdown>
          <el-button type="primary">
            打赏平台
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <div class="shoukuandiv">
              <img class="skm" :src="src" />
              <div class="zffs">
                <div :class="[isActive==1 ?'zfxuanzhong':'zffs1']" @click="zfxz(1)">支付宝</div>
                <div :class="[isActive==2 ?'zfxuanzhong':'zffs1']" @click="zfxz(2)">微信</div>
              </div>
            </div>
          </el-dropdown-menu>
        </el-dropdown>
        <el-input placeholder="搜索码农驿站" prefix-icon="el-icon-search" v-model="input" @keyup.enter.native="sousuo"></el-input>
        <el-button class="xbk" type="primary" circle size="medium " @click="xieblo(1)">
          <i class="el-icon-edit el-icon--right">&nbsp;&nbsp;写博客</i>
        </el-button>
        <el-avatar
          @click.native="xieblo(0)"
          :src="poot+'manongyizhanFile/users/'+user+'/头像/'+user+'.jpg'"
        ></el-avatar>
      </el-menu>
    </div>
  </div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";

export default {
  inject: ["reload"],
  data() {
    return {
      activeIndex: "1",
      input: "",
      isActive: 1,
      src: require("@/assets/支付宝收款码.png")
    };
  },
  methods: {
    ...mapMutations(["xgblogsousuo"]),
    sousuo() {
   this.xgblogsousuo(this.input)
    },
    xieblo(index) {
      this.$router.push("/blogguanli/" + index);
      this.reload();
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    mlyz() {
      window.location.reload();
    },
    zfxz(index) {
      this.isActive = index;
      if (index == 1) {
        this.src = require("@/assets/支付宝收款码.png");
      } else {
        this.src = require("@/assets/微信收款码.png");
      }
    },
    qiehuandaohang(index) {
      if (index == 1) {
        this.$router.push("/home");
      }
      if (index == 2) {
        const h = this.$createElement;
        this.$notify({
          title: "温馨提示",
          message: h("i", { style: "color: teal" }, "努力开发中")
        });
      }
      if (index == 3) {
        const h = this.$createElement;
        this.$notify({
          title: "温馨提示",
          message: h("i", { style: "color: teal" }, "努力开发中")
        });
      }
    }
  },
  computed: {
    ...mapState(["leixing"]),
    ...mapState(["poot"]),
    ...mapState(["user"]),
    ...mapState(["gerenindex"])
  }
};
</script>

<style scoped>
.zffs1 {
  text-align: center;
  margin: 0 20px;
}
.zfxuanzhong {
  color: #409eff;
  text-align: center;
  margin: 0 20px;
}
.zffs {
  display: flex;
  align-items: center;
  justify-content: center;
}
.shoukuandiv {
  background-color: #fff;
}
.xbk {
  margin-left: 30px;
}

.el-button {
  background-color: #1e1e1e;
  margin-right: 30px;
  color: #fff;
  border-color: #1e1e1e;
}
.skm {
  height: 150px;
  width: 150px;
  margin: 10px;
}
.el-input {
  width: 400px;
}
.el-menu {
  display: flex;
  justify-content: center;
  align-items: center;
}
.zititubiao {
  height: 30px;
  padding-right: 50px;
  padding-left: 50px;
  margin-right: 20px;
}
</style>